<template>
    <div class="Container Row">
        <div class="Row Aside">
            <div id="drawer" class="Col" :class="{Hidden : !drawerRef.visible}">
                <div class="Row Tabs">
                    <a-button :class="{Focus : drawerRef.showType==0}" @click="drawerRef.showList(0)">设备</a-button>
                    <a-button :class="{Focus : drawerRef.showType==1}" @click="drawerRef.showList(1)">航线</a-button>
                    <a-button :class="{Focus : drawerRef.showType==2}" @click="drawerRef.showList(2)">标记</a-button>
                </div>
                <div class="Flex Col" :class="{Hidden : drawerRef.showType!=0}">
                    <div class="Title"><span>设备列表</span><span>（{{drawerRef.deviceList.length}}）</span></div>
                    <div class="Flex Scroll">
                        <div id="devicelist" class="List Col">
                            <template v-for="(item,index) in drawerRef.deviceList"><!-- 设备列表项 -->
                                <p :class="{Focus: drawerRef.deviceList.focus==index}" @click="drawerRef.selectDevice(item,index)">
                                    <div class="Row"><img class="DeviceType" :src="svg('设备类型'+ item.deviceType)"><label class="Col Flex"><span class="Row"><span class="Title Row Flex"><img :src="svg('设备名称icon')">{{item.projectName||'未知项目'}}</span>{{deviceUtil.getBattery(item, '%')}}<span class="Battery Row" v-if="(item.deviceList[0]||{}).deviceOsd" :class="{Low : deviceUtil.getBattery(item)<20}"><span :style="{width:deviceUtil.getBattery(item)+'%'}"></span></span></span><div>{{item.deviceModel}}</div></label></div>
                                    <div class="Desc">{{deviceUtil.formatDesc(item)}}</div>
                                    <div class="Contact Row Wrap"><span><img :src="svg('部门')">{{item.projectName}}</span><span><img :src="svg('电话')">{{item.contactPhone}}</span><span><img :src="svg('人')">{{item.contactName}}</span></div>
                                    <span class="DeviceTag">{{deviceUtil.formatDeviceTag(item)}}</span>
                                </p>
                                <template v-for="(video) in deviceView.videos" v-if="drawerRef.deviceList.focus==index">
                                    <div :id="'video'+video.snindex" class="Video Swap">
                                        <LivePlayer @snapOutside="snapOutside" ref="player2" :muted="false" :autoplay="true" :videoUrl="video.url" live :controls="false"/>
                                        <section class="Row"><span class="Flex">{{item.projectName||'未知项目'}}</span><span><img :src="svg('全屏')" @click="deviceUtil.fullScreenVideo(video.snindex)"><img :src="svg('关闭')" @click="deviceUtil.closeVideo(video.snindex)"></span></section>
                                        <section class="Row Center"><span class="Btn">变焦</span></section>
                                        <section class="Row"><span class="Btn">广角</span><span class="Btn">红外</span><span class="State Flex roW ICenter"><i></i>直播中</span><img :src="svg('刷新')"><img :src="svg('设置')"></section>
                                    </div>
                                </template>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="Flex Col" :class="{Hidden : drawerRef.showType!=1}">
                    <div class="Title Row"><span class="Flex">航线列表</span><img :src="svg('上传')" @click="waylineEditor.showUpload()"><img :src="svg('创建')" @click="waylineEditor.addnew()"></div>
                    <div class="Flex Scroll" :class="{Hidden:!waylineEditor.isShowEditor}">
                        <div id="WaylineEditor" class="Flex Col" v-if="waylineEditor.data">
                            <div class="Title"><span class="Flex">航线设置</span><img :src="svg('保存-normal')" @click="waylineEditor.save()"><img :src="svg('关闭-normal')" @click="waylineEditor.close()"></div>
                            <div>航线信息</div>
                            <div><span>航线名称</span><input type="text" class="Flex" v-model="waylineEditor.data.name"/></div>
                            <div><span>航线类型</span><img :src="svg('航点')"><img :src="svg('建图航拍-不可选')"><img :src="svg('倾斜摄影-不可选')"><img :src="svg('航带飞行-不可选')"></div>
                            <div>飞行器及挂载设置</div>
                            <div class="Row"><img :src="png('无人机')"><div class="Flex Col DroneModel"><span :class="{Focus:waylineEditor.data.droneModel=='M300RTK'}" @click="waylineEditor.data.droneModel='M300RTK'">M300RTK</span><span :class="{Focus:waylineEditor.data.droneModel=='M30'}" @click="waylineEditor.data.droneModel='M30'">M30系列</span><span :class="{Focus:waylineEditor.data.droneModel=='MAVIC 30'}" @click="waylineEditor.data.droneModel='MAVIC 30'">MAVIC 30 系列</span></div></div>
                            <div class="Row"><span>挂载型号</span><select class="Flex" v-model="waylineEditor.data.payloadModel"><option value="H20">H20</option></select></div>
                            <div class="SavePic"><span>保存图片</span><label><input type="checkbox">广角</label><label><input type="checkbox">变焦</label><label><input type="checkbox">红外</label></div>
                            <div>飞行设置</div>
                            <div class="Row ITop"><span>飞向首航点模式</span><select class="Flex" v-model="waylineEditor.data.waylines_wpml.missionConfig.flyToWaylineMode"><option value="safely">M300RTK</option></select></div>
                            <div class="Row ITop"><span>飞行中失联动作</span><select class="Flex" v-model="waylineEditor.data.waylines_wpml.missionConfig.executeRCLostAction"><option value="goBack">继续执行</option></select></div>
                            <div><span>安全起飞高度</span><input type="text" v-model="waylineEditor.data.waylines_wpml.missionConfig.takeOffSecurityHeight">&nbsp;m</div>
                            <div><span>全局航线高度</span><input type="text" v-model="waylineEditor.data.waylines_wpml.Folder.globalHeight">&nbsp;m</div>
                            <div><span>全局飞行速度</span><input type="text" v-model="waylineEditor.data.waylines_wpml.missionConfig.globalTransitionalSpeed">&nbsp;m/s</div>
                            <div class="Row ITop"><span>全局航点转弯模式</span><select class="Flex" v-model="waylineEditor.data.waylines_wpml.Folder.globalWaypointTurnMode"><option value="toPointAndStopWithDiscontinuityCurvature">协调转弯，不过点，提前转弯</option></select></div>
                            <div class="Row ITop"><span>飞行器偏航角模式</span><select class="Flex" ><option>沿航线方向</option></select></div>
                            <div><span>航线结束动作</span><select class="Flex" v-model="waylineEditor.data.waylines_wpml.missionConfig.finishAction"><option value="goHome">自动反航</option></select></div>
                        </div>
                    </div>
                    <div class="Flex Scroll" :class="{Hidden:waylineEditor.isShowEditor}">
                        <div id="waylinelist" class="List Col">
                            <template v-for="(item,index) in drawerRef.waylineList"><!-- 航线列表项 -->
                                <p :class="{Focus: drawerRef.waylineList.focus==index}" @click="drawerRef.selectWayline(index, false)">
                                    <div class="Row"><img :src="svg('定位')"><span class="Uav"><img :src="svg('无人机')">{{item.droneModel || '未知无人机'}}</span><span class="Camera"><img :src="svg('相机')">{{item.payloadModel||'未知负载'}}</span><span class="HoverShow Flex roW"><img :src="svg('同步')"></span></div>
                                    <div class="Desc">{{item.name}}</div>
                                    <div class="Row Toolbar"><span><img :src="svg('创建人')">{{item.user_name}}</span><span class="Flex">{{item.createTime}}</span><span class="HoverShow roW"><img :src="svg('下载')" @click="waylineEditor.download(item)"><img :src="svg('编辑')"  @click.stop="waylineEditor.edit(item, index)"><img :src="svg('删除')" @click.stop="waylineEditor.del(item, index)"></span></div>
                                </p>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="Flex Col" :class="{Hidden : drawerRef.showType!=2}">
                    <div class="Title Row"><span class="Flex">标记列表</span><img :src="svg('上传')"><img :src="svg('创建')"></div>
                    <div id="markersearch" class="Row">
                        <img :src="svg('放大镜')"><input type="text" class="Flex" placeholder="请输入标记名称">
                    </div>
                    <div class="Flex Scroll">
                        <div id="markerlist" class="List Col">
                            <template v-for="(folder,folderIdx) in drawerRef.markerList"><!-- 标记文件夹 -->
                                <div :class="{Expand:folder.expand}">
                                    <p>
                                        <img :src="svg('箭头')" @click="markerEditor.toggleFolder(folder, folderIdx)"><img :src="svg('文件夹')"><span>{{folder.name}}</span><div><img :src="svg('分发状态')"><img :src="svg('锁关')"></div>
                                    </p>
                                    <template v-for="(item,markIdx) in folder.elements"><!-- 标记列表项 -->
                                        <p>
                                            <img :src="svg('眼睛'+item.display)" @click="item.display=(item.display?0:1)"><img :src="svg('标记类型2'+item.resource.type)"><span>{{item.elementName}}</span><div><img :src="svg('移动')"></div>
                                        </p>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
            <span @click="drawerRef.toggle()"><img :src="svg(drawerRef.visible?'收起':'展开')" :key="drawerRef.visible"></span>
        </div>
        <div id="backscreen" class="Flex Row">
            <input id="filechooser" type="file" multiple="multiple" accept=".kmz" @change="waylineEditor.upload" />
            <div id="map" class="Flex Swap"></div>
            <div id="waylinePointEditor" v-if="drawerRef.showType==1 && waylineEditor.data && waylineEditor.isShowEditor && waylineEditor.data.waylines_wpml">
                <div class="Title">航点设置</div>
                <nav class="Point Row">
                    <span>◀</span>
                    <div class="Flex Row">
                        <template v-for="idx in [6,5,4,3,2,1]" :key="idx" :reversed="true">
                            <span v-if="waylineEditor.pointsIndex.end-idx>=0" @click="waylineEditor.focusWaylinePoint(waylineEditor.pointsIndex.end-idx)" :class="{Focus : waylineEditor.pointsIndex.focus==(waylineEditor.pointsIndex.end-idx)}">{{waylineEditor.pointsIndex.end-idx+1}}</span>
                        </template>
                        <span v-if="waylineEditor.pointsIndex.end < waylineEditor.data.waylines_wpml.Folder.Placemark.length-1">…</span>
                        <span v-if="waylineEditor.pointsIndex.end < waylineEditor.data.waylines_wpml.Folder.Placemark.length" @click="waylineEditor.focusWaylinePoint(waylineEditor.data.waylines_wpml.Folder.Placemark.length-1)" :class="{Focus : waylineEditor.pointsIndex.focus==(waylineEditor.data.waylines_wpml.Folder.Placemark.length-1)}">{{waylineEditor.data.waylines_wpml.Folder.Placemark.length}}</span>
                    </div>
                    <span>▶</span>
                </nav>
                <div>
                    <span>航点高度</span><select readOnly><option selected>自定义</option><option>使用全局设置</option></select>
                </div>
                <div><span>绝对高度</span><input type="text" v-model="waylineEditor.pointsIndex.point.height">&nbsp;m</div>
                <div><span>绝对起飞高度</span><input type="text" v-model="waylineEditor.pointsIndex.point.executeHeight">&nbsp;m</div>
                <div><span>绝对地面高度</span><input type="text" v-model="waylineEditor.pointsIndex.point.ellipsoidHeight">&nbsp;m</div>
                <div><span>转弯模式</span><select v-model="waylineEditor.pointsIndex.point.waypointTurnDampingDist"><option value="0">协调转弯，不过点，提前转弯</option><option value="1">使用全局设置</option></select></div>
                <div><span>偏航角模式</span><select v-model="waylineEditor.pointsIndex.point.waypointHeadingMode"><option selected value="followWayline">沿航线方向</option><option value="">使用全局设置</option></select></div>
                <div><span>航点速度</span><input type="text" placeholder="默认全局配置"></div>
                <div><span>云台俯仰角</span><input type="text" placeholder="默认全局配置">°</div>
                <div><span>航点动作</span><select><option selected>添加动作</option></select></div>
            </div>
            <img class="Remote" :src="svg('远程-normal')" @click="drawerRef.navToRemote()" :class="{Hidden:drawerRef.showType!=0}">
            <img id="mapmode" :src="svg('3D切换')" @click="mapUtil.toggleMode()">
            <div id="marktools" class="Col" v-if="drawerRef.showType==2"><img :src="svg('标记类型0')" :class="{Focus:markerEditor.createType==0}" @click="markerEditor.start(0)"/><img :src="svg('标记类型1')" :class="{Focus:markerEditor.createType==1}" @click="markerEditor.start(1)"/><img :src="svg('标记类型2')" :class="{Focus:markerEditor.createType==2}" @click="markerEditor.start(2)"/></div>
            <div id="devicestate" class="Flex Row Scroll" v-if="drawerRef.showType==0 && drawerRef.deviceList.focus>=0">
                <img :src="svg('设备类型icon'+ (deviceView.deviceType))"><span>{{deviceUtil.dockState[deviceView.deviceState]}}</span>
                <div class="Row" v-if="deviceView.deviceType==3">
                    <template v-for="(ca,idx) in deviceView.cameras" v-if="deviceView.cameras.length>0">
                        <span class="Col" @click="deviceView.toggleDockVideo(idx)"><img :src="svg('监控')">监控{{idex}}</span>
                    </template>
                    <span class="Row"><img :src="svg('媒体上传')"><div class="Col"><span>媒体上传</span><span>{{deviceView.remain_photo_num || 0}}</span></div></span><span class="Row"><img :src="svg('网络图传信号')"><div class="Col"><span>网络</span><span>{{deviceView.deviceWireless || 0}}</span></div></span><img :src="svg('设备类型icon0')"><span>{{deviceUtil.droneState[deviceView.deviceState||0]}}</span>
                </div>
                <div class="Flex Row">
                    <span class="Col" @click="deviceView.toggleDroneVideo(0)" v-if="deviceView.droneCameras[0]"><img :src="svg('飞行相机')">飞行相机</span><span class="Col" @click="deviceView.toggleDroneVideo(1)" v-if="deviceView.droneCameras[1]"><img :src="svg('MT30')">MT30</span><span class="Row"><img :src="svg('网络图传信号')"><div class="Col"><span>图传信号</span><span>{{deviceView.droneWireless||0}}</span></div></span><span class="Row"><img :src="svg('搜星数量')"><div class="Col"><span>搜星数</span><span>{{deviceView.gps_number||0}}</span></div></span><span class="Row"><img :src="svg('海拔高度')"><div class="Col"><span>海拔高度</span><span>{{deviceView.height||0}}</span></div></span><span class="Row"><img :src="svg('相对地面高度')"><div class="Col"><span>相对地面高度</span><span>{{deviceView.relativeHeight||0}}</span></div></span><span class="Row"><img :src="svg('起飞点距离')"><div class="Col"><span>起飞点距离</span><span>{{deviceView.total_flight_distance||0}}</span></div></span><span class="Row"><img :src="svg('高度速度')"><div class="Col"><span>高度速度</span><span>{{deviceView.vspeed||0}}</span></div></span><span class="Row"><img :src="svg('水平速度')"><div class="Col"><span>水平速度</span><span>{{deviceView.hspeed||0}}</span></div></span>
                </div>
            </div>
            <div id="markerinfo" class="Col" :class="{Hidden: !markerEditor.markerinfo}">
                <div>标记信息</div>
                <div v-if="markerEditor.markerinfo"><img :src="svg('标记类型2'+(markerEditor.markerinfo.resource.type))"><input type="text" v-model="markerEditor.markerinfo.elementName"><img :src="svg('删除')" @click="markerEditor.del()"></div>
                <div class="Row" v-if="markerEditor.markerinfo"><span>颜色</span>
                    <div class="Color Row" v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#0xE23C39', '#212121']" @click="markerEditor.markerinfo.resource.content.properties.color = color.replace('#', '0x')">
                        <span :style="{background:color}" :class="{Focus:markerEditor.markerinfo.resource.content.properties.color == color.replace('#', '0x')}"></span>
                    </div>
            </div>
            </div>
            <div id="waylinestate" class="Row" v-if="drawerRef.showType==1 && drawerRef.waylineList.length>0 && drawerRef.waylineList.focus>=0 && waylineEditor.data"><span class="Row"><img :src="svg('航线长度')"><div class="Col"><span>航线长度</span><span>{{waylineEditor.data.waylines_wpml.Folder.distance}}</span></div></span><span class="Row"><img :src="svg('预计执行时间')"><div class="Col"><span>预计执行时间</span><span>{{waylineEditor.data.waylines_wpml.Folder.duration}}</span></div></span><span class="Row"><img :src="svg('航点')"><div class="Col"><span>航点</span><span>{{waylineEditor.data.waylines_wpml.Folder.Placemark.length}}</span></div></span><span class="Row"><img :src="svg('照片')"><div class="Col"><span>照片</span><span>{5}</span></div></span></div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref,computed, onMounted, onUnmounted,defineComponent } from 'vue'
import { useRouter, useRoute } from "vue-router";
import AMapLoader from "@amap/amap-jsapi-loader";
import coordtransform from 'coordtransform';

import LivePlayer from '@liveqing/liveplayer-v3' // vue3

import { waylineApi } from '../wayline/data.api';
import { markerApi } from './marker.api';
import { deviceApi } from '../equipManage/deviceManageList/data.api';
import { func } from 'vue-types';

const router = useRouter();

const svg = (name) => {
  return `/mapView/${name}.svg` //拼接文件路径
}
const png = (name) => {
  return `/mapView/${name}.png` //拼接文件路径
}

const satelliteLayer = ref(null)

let drawerRef = ref({showType: -1, visible: true, flvURL: ``, deviceList: [], waylineList: [], markerList: [], interval: null,
    showList: async function(showType, reload){
        if(this.showType==0 && mapUtil.isScale){
            deviceUtil.value.fullScreenVideo(this.deviceList.focus);//切换设备前先切换地图显示
        }

        this.showType = showType;
        if(showType==0 && (this.deviceList.length==0 || reload)){
            var list = this.deviceList;
            await deviceApi.list({pageSize:100, deviceType:'2,3'}).then(function(res){
                list.length = 0;
                list.push(...res.records);
                list.focus = -1;
            });
        }else if(showType==1 && (this.waylineList.length==0 || reload)){
            var list = this.waylineList;
            await waylineApi.query({pageSize:100}).then(function(res){
                list.length = 0;
                list.push(...res.records);
                list.focus = -1;
            });
        }else if(showType==2){
            var list = this.markerList;
            await markerApi.groups({}).then(function(res){
                list.length = 0;
                list.push(...res);
                for(let group of res){
                    for(let ele of group.elements){
                        if(ele.display==0){
                            continue;
                        }
                        mapUtil.markers[ele.id] = ele;
                    }
                }
            });
            list.focus = 0;
        }
        mapUtil.updateView();
    },
    toggle: function(){
        this.visible = !this.visible;
    },
    selectDevice: function(device, index){
        if(mapUtil.isScale){
            deviceUtil.value.fullScreenVideo(this.deviceList.focus);//切换设备前先切换地图显示
        }

        this.deviceList.focus=index;
        deviceView.value.updateByDevice(device);

        mapUtil.updateView();
        
        if(this.interval!=null){
            clearInterval(this.interval);
        }
        this.interval = setInterval(function() {
            device.deviceType=='3' && deviceApi.getShadow(device.deviceId).then((res)=>{
                deviceView.value.updateByShadow(res, null);
            });
            device.deviceList[0] && deviceApi.getShadow(device.deviceList[0].deviceId).then((res)=>{
                deviceView.value.updateByShadow(null, res);
            });
        }, 5000);
    },
    selectWayline: function(index, editable){
        this.waylineList.focus=index;
        waylineEditor.value.isShowEditor = editable;
        mapUtil.updateView();
    },
    navToRemote: function(){
        let device = this.deviceList[this.deviceList.focus];
        if(device.deviceList && device.deviceList.length>0){
            router.push({ path: '/remoteOver', query: { deviceId: device.deviceId, deviceSn: device.deviceSn, droneId: device.deviceList[0].deviceId} });
        }
    }
});

const deviceView = ref({
    deviceId: 0, deviceSn: '', deviceType: '3', deviceState: 0, cameras: [], remain_photo_num: 0, deviceWireless: 0, safe_land_height:0, droneId:0, droneSn: '', droneState: 0, droneCameras:[], droneWireless: 0, gps_number: 0, height:0, relativeHeight:0, total_flight_distance: 0, vpeed: 0, hspeed: 0,
    videos: [],
    toggleDockVideo: function(i){
        var zhis = this, snindex = zhis.deviceSn+i;
        for(var idx in zhis.videos){
            if(zhis.videos[idx].snindex==snindex){
                zhis.videos.splice(idx, 1);
                return;
            }
        }

        deviceApi.getLiveUrl({'gatewayDeviceSn': zhis.deviceSn, "deviceId": zhis.deviceId, "deviceSn": zhis.deviceSn, "cameraId": zhis.cameras[i].camera_index, "videoIndex": zhis.cameras[i].video_list[0].video_index}).then(function(res){
            //var liveUrl = "rtmp://172.30.50.31/live/1699878048201";
            res.livePalyUrl && zhis.videos.push({snindex: snindex, url: res.livePalyUrl.replace('http://', 'ws://').replace('/hls.m3u8', '.live.flv')});
        });
    },
    toggleDroneVideo: function(i){
        var zhis = this, snindex = zhis.droneSn+i;
        for(var idx in zhis.videos){
            if(zhis.videos[idx].snindex==snindex){
                zhis.videos.splice(idx, 1);
                return;
            }
        }

        deviceApi.getLiveUrl({'gatewayDeviceSn': zhis.deviceSn, "deviceId": zhis.droneId, "deviceSn": zhis.droneSn, "cameraId": zhis.droneCameras[i].camera_index, "videoIndex": zhis.droneCameras[i].video_list[0].video_index}).then(function(res){
            //var liveUrl = "rtmp://172.30.50.31/live/1699878048201";
            res.livePalyUrl && zhis.videos.push({snindex: snindex, url: res.livePalyUrl.replace('http://', 'ws://').replace('/hls.m3u8', '.live.flv')});
        });
    },
    updateByDevice: function(device){
        this.deviceId = device.id;
        this.deviceSn = device.deviceSn;
        this.deviceType = device.deviceType;
        this.deviceState = device.state;
        if(device.deviceList.length>0){
            this.droneId = device.deviceList[0].id;
            this.droneSn = device.deviceList[0].deviceSn;
            this.droneState = device.deviceList[0].state;
        }
        this.videos.length = 0;
        this.cameras.length = 0;
        this.droneCameras.length = 0;
        if(device.liveCapacity && device.liveCapacity.coexist_video_number_max>0){
            var device_list = device.liveCapacity.device_list;
            for(var i in device_list){
                var cameralist = device_list[i].camera_list;
                for(var j in cameralist){
                    if(device_list[i].sn==device.deviceSn){
                        deviceView.value.cameras.push(cameralist[j]);
                    }else{
                        deviceView.value.droneCameras.push(cameralist[j]);
                    }
                }
            }
        }
    },
    updateByShadow: function(deviceShadow, droneShadow){
        if(deviceShadow!=null){
            this.deviceState = deviceShadow.state;
            this.remain_photo_num = deviceShadow.dockShadow.wirelessLink.media_file_detail.remain_upload;
            this.deviceWireless = JSON.parse(deviceShadow.dockShadow.dockState.network_state.rate).toFixed(2);
            this.safe_land_height = deviceShadow.dockShadow.dockState.alternate_land_point.safe_land_height;
            this.droneWireless = deviceShadow.dockShadow.wirelessLink.wireless_link.sdr_quality
        }
        if(droneShadow!=null){
            this.droneState = droneShadow.state;
            this.gps_number = JSON.parse(droneShadow.aircraftShadow.positionState).gps_number;
            this.height = JSON.parse(droneShadow.aircraftShadow.height).toFixed(2);
            this.relativeHeight = (this.height - this.safe_land_height).toFixed(2);
            this.vspeed = droneShadow.aircraftShadow.verticalSpeed;
            this.hspeed = droneShadow.aircraftShadow.horizontalSpeed;
            this.total_flight_distance = JSON.parse(droneShadow.aircraftShadow.homeDistance).toFixed(2);

        }
    }
});

const waylineEditor = ref({
    isShowEditor: false,
    data: null,
    pointsIndex: {end: 0, point: {}, focus: 0},
    addnew: function(){
        this.isShowEditor = true;
        this.data = {};
        mapUtil.updateView();
    },
    edit: function(wayline, index){
        this.data = wayline;
        drawerRef.value.selectWayline(index, true);
    },
    save: function(){
        const zhis = this, isAddNew = zhis.data.id;
        waylineApi.save(zhis.data).then(res => {
            if(res.id){
                zhis.data = res;
                return alert(res.message || "保存成功。");
            }
            return alert(res.message || "保存失败！");
        });
    },
    close: function(){
        this.isShowEditor=false;
        this.pointsIndex.end=0;
    },
    showUpload: function(){
        document.getElementById('filechooser').click();
    },
    upload: function(evt){
        let files = evt.target.files;
        const formData = new FormData();
        for(var i=0, len=files.length;i<len;i++){
            formData.append('files', files[i]);
        }
        waylineApi.upload(formData).then(function(msg){
            alert(msg)
        });
    },
    download: function(wayline){
        waylineApi.get({workspaceId:wayline.workspaceId, waylineId: wayline.id}).then(function(res){
            window.open(res.fileUrl);
            console.log(res.fileUrl);
        });
    },
    del: function(item, index){
        waylineApi.del({waylineId: item.id}).then(()=>{
            drawerRef.value.showList(1, true);
        });
    },
    focusWaylinePoint: function(index){
        this.pointsIndex.focus=index;
        this.pointsIndex.point=this.data.waylines_wpml.Folder.Placemark[index];
    }
});

const markerEditor = ref({
    createType: -1,
    mouseTool: null,
    polyEditor: null,
    markerinfo: null,
    start: function(type){
        const zhis = this;
        type!=null && (zhis.createType = zhis.createType == type?-1:type);
        if(zhis.createType==-1 && zhis.mouseTool){
            return zhis.mouseTool.close();
        }

        if(!zhis.mouseTool){
            zhis.mouseTool = new AMap.MouseTool(mapUtil.map);
            zhis.mouseTool.on('draw', function (e) {
                var markerList = drawerRef.value.markerList;
                let amarker = e.obj, info = {elementName:'新建标记', resource:{content:{properties:{color:'0x2D8CF0',clampToGround:false}, geometry: {}}}};
                markerList[markerList.focus] && (info.groupId = markerList[markerList.focus].id);
                if(amarker.className === 'AMap.Marker'){
                    info.elementName = '新建点';
                    info.resource.type = 0;
                    info.resource.content.geometry.type = 'Point';
                    info.resource.content.geometry.coordinates = amarker._points;
                }else if(amarker.className === 'Overlay.Polyline'){
                    info.elementName = '新建线';
                    info.resource.type = 1;
                    info.resource.content.geometry.type = 'LineString';
                    info.resource.content.geometry.coordinates = amarker.getPath().map(obj => ([obj.lng, obj.lat]));
                }else if(amarker.className === 'Overlay.Polygon'){
                    info.elementName = '新建面';
                    info.resource.type = 2;
                    info.resource.content.geometry.type = 'Polygon';
                    info.resource.content.geometry.coordinates = amarker.getPath().map(obj => ([obj.lng, obj.lat]));
                }

                markerApi.save(info).then((res)=>{
                    if(res.id){
                        return Object.assign(info, res);
                    }
                    return alert("标记成功，但是保存失败！");
                })

                zhis.bindData(info, amarker);

                if (e.obj && (e.obj.className === 'Overlay.Polygon' || e.obj.className === 'Overlay.Polyline')) {
                    zhis.polyEditor.setTarget(amarker);
                    zhis.polyEditor.open();
                }
            });
        }

        if(zhis.markerinfo != null){            // 显示了信息框就不让画标记
            return;
        }

        if(zhis.createType==0){
            zhis.mouseTool.marker({ icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", draggable: true });
        }else if(zhis.createType==1){
            zhis.mouseTool.polyline({ strokeColor: "#3366FF", strokeOpacity: 1, strokeWeight: 6, strokeStyle: "solid" });
        }else if(zhis.createType==2){
            zhis.mouseTool.polygon({ strokeColor: "#FF33FF", strokeWeight: 6, strokeOpacity: 0.2, fillColor: '#1791fc', fillOpacity: 0.4, strokeStyle: "solid" });
        }
    },
    bindData: function(info, amarker){
        if(!this.polyEditor){
            this.polyEditor = new AMap.PolygonEditor(mapUtil.map, amarker);
            this.polyEditor.on('addnode', function (event) {
                console.info('触发事件：addnode', event)
            })
                            
            this.polyEditor.on('adjust', function (event) {
                console.info('触发事件：adjust', event)
            })
                            
            this.polyEditor.on('removenode', function (event) {
                console.info('触发事件：removenode', event)
            })
        }

        amarker.on('click', (e) => this.showMarkerInfo(info, amarker));

        info.resource.type==0 && amarker.on('drag', function(e){                // 移动点标记
            var lnglat = e.lnglat, coordinates = info.resource.content.geometry.coordinates;
            coordinates[0] = lnglat.lng;
            coordinates[1] = lnglat.lat;
        });

        info.resource.type!=0 && amarker.on('click', (e) => this.showPolyEditor(info, amarker));
    },
    del: function(){

    },
    showPolyEditor: function(info, polygon){
        let zhis = this;
        zhis.mouseTool.close();
        zhis.polyEditor.setTarget(polygon);
        zhis.polyEditor.open();
        setTimeout(()=>{
            zhis.start(null);
        }, 500);
    },
    showMarkerInfo: function(markerinfo, marker){
        var zhis = this;
        zhis.mouseTool && zhis.mouseTool.close();

        markerEditor.value.markerinfo = markerinfo;
        var lnglat = markerinfo.resource.type==0?marker.getPosition():marker.getPath()[0];
        var infoWindow = new AMap.InfoWindow({
            position: [lnglat.lng, lnglat.lat],
            offset: new AMap.Pixel(-50, -50), draggable:true,
            content: document.getElementById('markerinfo')
        });
        infoWindow.on('close',function(){
            zhis.markerinfo = null;
            zhis.start(null);
        })

        infoWindow.open(mapUtil.map);
    },
    toggleFolder: function(folder, index){
        folder.expand = !folder.expand;
    }
});

const mapUtil = {
    map : null,
    devices : {},
    waylines: {},
    markers: {},
    isScale: false,         // 地图是否被缩小
    isSatelliteVisible:false,
    updateView: function(){
        this.map.clearMap();
        if(drawerRef.value.showType==0){
            let deviceList = drawerRef.value.deviceList, device = deviceList[deviceList.focus];
            device && this.showDevice(device);
        }else if(drawerRef.value.showType==1){
            if(waylineEditor.value.isShowEditor){
                this.showWayline(waylineEditor.value.data, true);
            }else{
                let waylineList = drawerRef.value.waylineList, wayline = waylineList[waylineList.focus];
                wayline && this.showWayline(wayline);
            }
        }else if(drawerRef.value.showType==2){
            this.showMarkers();
        }
        this.map.setFitView();
    },
    showDevice: function(device){
        let markArr = this.devices[device.id] = [];
        if (device.longitude != 0 && device.latitude != 0) {
            let position1 = coordtransform.wgs84togcj02(device.longitude, device.latitude);
            markArr.push(new AMap.Marker({title: device.deviceName,
                position: new AMap.LngLat(position1[0], position1[1]), offset: new AMap.Pixel(0, 10),
                icon:new AMap.Icon({image: png('地图设备'+device.deviceType), size: new AMap.Size(55, 55), imageSize: new AMap.Size(55,55) })
            }))
        }

        // 查询下面有无设备
        if (device.deviceList && device.deviceList.length>0) {
            let subdevice = device.deviceList[0];
            if (subdevice.longitude != 0 && subdevice.latitude != 0) {
                let position2 = coordtransform.wgs84togcj02(subdevice.longitude, subdevice.latitude)
                markArr.push(new AMap.Marker({title: device.deviceName,
                    position: new AMap.LngLat(position2[0], position2[1]), offset: new AMap.Pixel(0, -40),
                    icon:new AMap.Icon({image: png('地图设备' + subdevice.deviceType), size: new AMap.Size(55, 55), imageSize: new AMap.Size(50,55) })
                }))
            }
        }
        this.map.add(markArr);
    },
    showWayline: function(waylineInfo, editable){
        var zhis = this, thismap = this.map, waylines = this.waylines;
        if(!waylineInfo.waylines_wpml){
            waylineInfo.waylines_wpml = {
                missionConfig: {flyToWaylineMode:'safely', finishAction:'goHome', exitOnRCLost:'executeLostAction', executeRCLostAction:'goBack', takeOffSecurityHeight: 80, globalTransitionalSpeed: 15, droneInfo: {droneEnumValue:77, droneSubEnumValue:0}, payloadInfo:{payloadEnumValue:66, payloadSubEnumValue:0, payloadPositionIndex:0}},
                Folder: {templateType:'waypoint', globalHeight: 50, autoFlightSpeed: 8, globalWaypointTurnMode:'toPointAndStopWithDiscontinuityCurvature', distance:0, duration:0, Placemark:[]}
            };
        }
        if(!waylineInfo.id){
            this.renderWayline(waylineInfo, editable);
            return;
        }

        waylineApi.get({workspaceId: waylineInfo.workspaceId, waylineId: waylineInfo.id}).then(function(res){
            waylineApi.resolveFile(res.fileUrl, function(waylines_wpml){
                waylineInfo.waylines_wpml = waylines_wpml;              // 航线的点位
                zhis.renderWayline(waylineInfo, editable);
            });
            console.log(res.fileUrl);
        });
    },
    renderWayline: function(waylineInfo, editable){
        let points = waylineInfo.waylines_wpml.Folder.Placemark;
        if(points.length==0){
            points.push({lng: 114.118862694324, lat:22.6973392910372, height: 0},{lng: 114.1288, lat:22.70, height: 0})
        }

        var polyline1 = this.waylines[waylineInfo.id];
        if(!polyline1){
            polyline1 = this.waylines[waylineInfo.id] = new AMap.Polyline({path: points.map(obj => ([obj.lng, obj.lat])), strokeColor: "#FF33FF", strokeWeight: 6, strokeOpacity: 0.9});
        }
        this.map.add([polyline1]);
        this.map.setFitView();

        if(editable){
            waylineEditor.value.pointsIndex.end = points.length>6?6:points.length;
            waylineEditor.value.pointsIndex.focus = 0;
            waylineEditor.value.pointsIndex.point = points[0];

            var updateWaylinePoints = function (event) {
                let current = event.lnglat;
                if(event.type=='removenode'){
                    for(var i in points){
                        if(points[i].lat==current.lat && points[i].lng==current.lng){
                            points.splice(i, 1);
                            return;
                        }
                    }
                }

                let index=0, path = event.target.getPath();
                for(;index<path.length;index++){
                    if(path[index].lat==current.lat && path[index].lng==current.lng){
                        break;
                    }
                }

                if(event.type=='addnode'){
                    points.splice(index, 0, {lng: current.lng, lat: current.lat, height: 0});
                }else if(path.length==points.length){
                    points[index].lng = current.lng;
                    points[index].lat = current.lat;
                }
            }

            var PolygonEditor = new AMap.PolygonEditor(this.map, polyline1);
            PolygonEditor.on("addnode", updateWaylinePoints).on("adjust", updateWaylinePoints).on('removenode', updateWaylinePoints);
            PolygonEditor.open();
        }
    },
    showMarkers: function(){
        const markerArr = [];
        for(var id in this.markers){
            var info = this.markers[id], coordinates = info.resource.content.geometry.coordinates, amarker;
            if(!coordinates){}
            else if(info.resource.type==0){
                amarker = new AMap.Marker({ 
                    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", draggable: true, 
                    position: new AMap.LngLat(coordinates[0], coordinates[1])
                });
                console.log(coordinates)
            }else if(info.resource.type==1){
                amarker = new AMap.Polyline({path: coordinates, strokeColor: "#FF33FF", strokeWeight: 6, strokeOpacity: 0.9});
            }else if(info.resource.type==2){
                amarker = new AMap.Polygon({path: coordinates, strokeColor: "#FF33FF", strokeWeight: 6, strokeOpacity: 0.2, fillOpacity: 0.4, fillColor: '#1791fc' });
            }
            if(amarker){
                markerEditor.value.bindData(info, amarker);
                markerArr.push(amarker);
            }
        }
        this.map.add(markerArr);
    },
    toggleMode: function(){
      this.isSatelliteVisible = !this.isSatelliteVisible
      if(this.isSatelliteVisible){
        this.map.setPitch(40);
        this.map.add(satelliteLayer.value)
      }else{
        this.map.setPitch(0);
        this.map.remove(satelliteLayer.value)
      }
    },
}

const deviceUtil = {
    types : ['飞机', '遥控器', '机场'],
    dockState : ["空闲中","现场调试","远程调试","固件升级中","作业中","离线"],
    droneState : ["待机","起飞准备","起飞准备完毕","手动飞行","自动起飞","航线飞行","全景拍照","智能跟随","ADS-B 躲避","自动返航","自动降落","强制降落","三桨叶降落","升级中","未连接","APAS","虚拟摇杆状态","指令飞行","离线"],
    formatDeviceTag: function(device){
        return this.types[device.deviceType-1];
    },
    formatDesc : function(device) {
        let des = this.types[device.deviceType-1]+ '-' +device.deviceName;
        if(device.deviceList && device.deviceList.length>0 && device.deviceList[0].deviceOsd){
            des = des + (this.state[device.deviceList[0].deviceOsd.mode_code] || '');
        }
        return des;
    },
    getBattery: function(device, format){
        if(device.deviceList && device.deviceList.length>0 && device.deviceList[0].deviceOsd){
            let percent = device.deviceList[0].deviceOsd.battery.capacity_percent || 0;
            return format?percent+format:percent;
        }
        return '';
    },
    isLowBattery: function(device){
        if(device.deviceList && device.deviceList.length>0 && device.deviceList[0].deviceOsd){
            return device.deviceList[0].deviceOsd.battery.capacity_percent<20;
        }
        return false;
    },
    swapElements : function(a, b) {
        if (a == b) return;
        //记录父元素
        var bp = b.parentNode, ap = a.parentNode
        //记录下一个同级元素
        var an = a.nextElementSibling, bn = b.nextElementSibling
        //如果参照物是邻近元素则直接调整位置
        if (an == b) return bp.insertBefore(b, a)
        if (bn == a) return ap.insertBefore(a, b)
        if (a.contains(b)) return ap.insertBefore(b, a), bp.insertBefore(a, bn)//如果a包含了b
        else return bp.insertBefore(a, b), ap.insertBefore(b, an)
    },
    fullScreenVideo: function(snindex){
        mapUtil.isScale = !mapUtil.isScale;
        let mapDom =document.getElementById('map');
        let videoDom = document.getElementById('video'+snindex);
        this.swapElements(mapDom, videoDom);
    },
    closeVideo: function(snindex){
        if(mapUtil.isScale){
            this.fullScreenVideo(snindex);
        }

        let videos = deviceView.value.videos;
        for(var idx in videos){
            if(videos[idx].snindex==snindex){
                videos.splice(idx, 1);
                return;
            }
        }
    }

};

onMounted(() => {
    AMapLoader.load({
        key: "59c61f064c552f2ace25ff0c1d6465a7", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.PolygonEditor', 'AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        let latitudeLongitude = localStorage.getItem('latitudeLongitude');
        mapUtil.map = new AMap.Map("map", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 13, // 初始化地图级别
            resizeEnable: true,
            center: latitudeLongitude?JSON.parse(latitudeLongitude):[116.478935, 39.997761], // 初始化地图中心点位置
        });

        drawerRef.value.showList(0);

        // 初始化卫星图层
        satelliteLayer.value = new AMap.TileLayer.Satellite()
    }).catch((e) => {
        console.log(e);
    });
});

onUnmounted(() => {
    mapUtil.map?.destroy();
    if(drawerRef.value.interval!=null){
            clearInterval(drawerRef.value.interval);
        }
});

</script>

<style lang="less" scoped>
    .Container{width: 100%;height: 100%;position: relative;}
    .Container>*{min-width: 30px;position: absolute;top:0;height: 100%;}
    .Row{ display: flex; flex-direction: row; }
    .roW{ display: flex; flex-direction: row; justify-content:flex-end; }
    .Col{ display: flex; flex-direction: column; }
    .coL{ display: flex; flex-direction: column; justify-content: flex-end; }
    .Row.Center,.roW.Center,.Col.Center,.col.Center{ justify-content:center !important; }
    .Row.ICenter,.roW.ICenter,.Col.ICenter,.col.ICenter{ align-items:center !important; }
    .Row.ITop,.roW.ITop,.Col.ILeft,.col.ILeft{ align-items:flex-start !important; }

    .Flex{ flex: 1; }
    .Wrap{flex-wrap: wrap;}
    .Scroll{overflow: auto;}

    .BgBlue{background: #4AA7FF;}
    .BgGreen{background: #4AFFA9;}
    .BgYellow{background: #FFCA4A;}
    .BgRed{background: #FF4A4A;}
    .BgPink{background: #FF65B8;}

    .Aside{background-color: white;position: relative;}
    #drawer{width: 354px;align-items: stretch;}
    #drawer .Scroll{position: relative;}
    #drawer .Tabs>*{flex-grow: 1;align-items: center;justify-content: center;padding: 10px;height: auto;border: none;background-color: #EEEEEE;border-radius: 0;}
    #drawer .Tabs>.Focus{background: white;}
    #drawer>div>.Title{ padding:10px 20px; color: #333333;font-size: 16px;border-bottom: 1px solid lightgrey;}
    #drawer>div>.Title>img{margin-right: 12px;}

    #drawer+span{display:flex;width: 30px;height: 30px;position: absolute;top:3.5em;right: 0;z-index: 99; justify-content:center; align-items:center;}
    #devicelist{position: absolute;width: 100%;}
    #devicelist>p{position:relative;margin: 12px 18px 0 18px;padding:6px;border: 1px solid rgba(0, 0, 0, 0.05);border-radius: 4px;font-size: 12px;}
    #devicelist>p.Focus{border-color: #1875D3;}

    #devicelist .Title{font-weight: bold;font-size: 14px;word-break: keep-all;overflow: hidden;}
    #devicelist .DeviceType{margin-right: 12px;}
    #devicelist .Desc{padding: 6px 12px;color:#1D986C;background: #D6F7ED;word-break: keep-all;overflow: hidden;}
    #devicelist .Contact{padding: 6px 12px;}
    #devicelist .Contact>*{min-width: 50%;line-height: 26px;}
    #devicelist .DeviceTag{position:absolute;right: 0;bottom: 0;height: 17px;color:#2595D2;background: rgba(76,185,255,0.41);box-shadow: inset 0px 0px 3px 0px rgba(95,212,253,0.5);border-radius: 4px;opacity: 0.37;}
    #devicelist>.Swap{position:relative;min-height:160px;border: 1px solid grey;margin: 12px 18px 0 18px;color:white;font-size: 12px;}
    #devicelist>.Video>section{position: absolute;width: 100%;background: transparent;align-items: center;padding: 8px;pointer-events: none;}
    #devicelist>.Video>section:last-child{bottom:0;}
    #devicelist>.Video>section:not(:last-child){top:0;pointer-events: none;}

    #backscreen>.Video{position:absolute;overflow: hidden;max-height:100%;}
    #backscreen>.Video>section:not(:last-child){position: absolute;top:0;width: 100%;background: transparent;align-items: center;padding: 8px;pointer-events: none;}

    #backscreen>.Video>section:last-child{position: absolute;bottom: 0;padding: 0 2em 7em 2em;width: 100%;color: white;}

    .Video>section img{margin:0 4px;pointer-events: auto;}
    .Video .Btn{pointer-events: auto;min-width:64px;font-size:12px;padding:4px 8px;margin:0 4px;color:whitesmoke;
        background: linear-gradient(180deg, #8F8B8B 0%, rgba(70,76,94,0.95) 100%);
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
        border-radius: 4px;
        opacity: 0.4;text-align: center;}
    .Video .State>i{display:flex;background: red;width: 8px;height: 8px;}

    .Battery{background-image:url('/mapView/电池true.svg');background-repeat: no-repeat;height: 12px;width: 24px;margin: auto;padding-right: 6px;}
    .Battery.Low{background-image:url('/mapView/电池false.svg');}
    .Battery>span{max-width: 100%;background: green;margin: 2px 0 3px 0;}

    #waylinelist{position: absolute;width: 100%;}
    #waylinelist>p{position:relative;margin:0;padding: 10px 12px 0 12px;border: 1px solid rgba(0,0,0,0.05);}
    #waylinelist>p.Focus{border-color: #1875D3;}
    #waylinelist{line-height: 36px;font-size: 12px;}
    #waylinelist span{display: flex;width: 100px;align-items: center;}
    #waylinelist>p>div:first-child{align-items: center;}
    #waylinelist>p>div:first-child img{height: 26px;}
    #waylinelist .Uav{color:#485E71;}
    #waylinelist .Camera{color:#6B6AEE;}
    #waylinelist .Desc{color:#333333;font-size: 14px;font-weight: bold;word-break: keep-all;overflow: hidden;}
    #waylinelist .Toolbar{color:#999999;font-size: 12px;}
    #waylinelist .Toolbar span{height: 24px;align-items: center;}
    #waylinelist>p .HoverShow{display: none;}
    #waylinelist>p:hover .HoverShow{display: flex;}

    #WaylineEditor{position: absolute;}
    #WaylineEditor>div{display: flex;margin: 8px;}
    #WaylineEditor>div>span:first-child{width: 7em;margin-left: 16px;margin-right: 6px;}
    #WaylineEditor>.Title{background: #F8FDFF;}
    #WaylineEditor>.Title>span{font-size: 14px;display: flex;align-items: center;color: #167DB5;}
    #WaylineEditor .DroneModel>span{margin:4px 10px;padding:4px;text-align: center;border: 1px solid #EEEEEE;}
    #WaylineEditor .DroneModel>.Focus{background: linear-gradient(315deg, #2C9AD6 0%, #167DB5 100%);color:white}
    #WaylineEditor .SavePic label{margin-right: 1em;}
    #WaylineEditor select,#WaylineEditor input[type=text]{height: 2em;border-radius: 2px;border: 1px solid #EEEEEE;}

    #markerlist{padding:8px;}
    #markerlist>div>p{display: flex;padding-left: 1.5em;}
    #markerlist>div>p:first-child{padding-left: 0;}
    #markerlist>div>p:not(:first-child){display: none;}
    #markerlist>div>p>div{display:flex;justify-content:flex-end;flex-grow: 1;}
    #markerlist>div>p:first-child>div{margin-right: 2em;}
    #markerlist>div.Expand>p:first-child>img:first-child{transform: rotate(90deg);}
    #markerlist>div.Expand>p{display: flex;}

    #markersearch{margin: 8px 16px;border: 1px solid rgba(0, 0, 0, 0.05);}
    #markersearch>input{outline: none;border: none;padding: 2px 4px;}

    #backscreen{position: relative;height: 100%;}
    #backscreen>.Remote{position:absolute;top: 1em;left:1em;}
    #mapmode{position:absolute;bottom: 6em;right:1em;}
    #marktools{position:absolute;top: 1em;right:1em;padding: 4px;background: #000000;cursor:pointer}
    #marktools>.Focus{background: linear-gradient(315deg, #8CB6FF 0%, #4578FF 100%);border-radius: 2px;}
    #backscreen>.Swap{width: 100%;height: 100%;background: black;}//地图容器
    #devicestate{position:absolute;bottom:0;height:76px;width:100%;padding:14px;background: #000000;border-radius: 4px;opacity: 0.48;backdrop-filter: blur(2px);align-items: center;color:white;font-size: 12px;}
    #devicestate>div{align-items: center;}
    #devicestate span{white-space: nowrap;word-break: keep-all;margin:0 10px;align-items: center;}
    #waylinestate{position:absolute;bottom:0;height:76px;left: 50%;transform: translate(-50%, -50%);padding:14px;background: #000000;border-radius: 4px;opacity: 0.48;backdrop-filter: blur(2px);align-items: center;color:white;font-size: 12px;}
    #waylinestate>div{align-items: center;}
    #waylinestate span{white-space: nowrap;word-break: keep-all;margin:0 10px;align-items: center;}

    #filechooser{width: 1px;height: 1px;position: absolute;}

    #waylinePointEditor>div{margin:6px;display: flex;padding: 8px;color: #333333;}
    #waylinePointEditor select,#waylinePointEditor input[type=text]{height: 2em;border-radius: 2px;border: 1px solid #EEEEEE;flex-grow: 1;}
    #waylinePointEditor>.Title{padding: 10px 20px; color: #333333; font-size: 16px;}
    #waylinePointEditor>.Point{border-top: 1px solid #EBEBEB;padding: 4px 16px;}
    #waylinePointEditor>.Point span{height: 24px;width: 24px;margin: 6px;display: flex;align-items: center;justify-content: center;}
    #waylinePointEditor>.Point>div>.Focus{background: linear-gradient(315deg, #1792D6 0%, #0E6EA1 100%);border-radius: 15px;padding:4px;}

    #waylinePointEditor>div>span:first-child{width: 7em;margin-left: 16px;margin-right: 6px;}

    #markerinfo>div>*:first-child{min-width: 2em;margin-right: 8px;}
    #markerinfo .Color>span{display:flex;width: 21px;height: 21px;margin: 0 16px 0 0;border-radius: 16px;}
    #markerinfo>div{margin:8px 0;}
    .Hidden{display: none !important;}
</style>
